<template>
  <div class="container">
    <h1>{{ msg }}</h1>
    <div>
      <label for="email">
        <span>账号：</span
        ><input id="email" type="email" v-model="ruleForm.user" /> </label
      ><br />
      <label for="password">
        <span>密码：</span
        ><input id="password" type="password" v-model="ruleForm.pass" /> </label
      ><br />
      <button :plain="true" @click="postLogin">login</button>
      <p>今天的日期是: {{ date }}</p>
    </div>
  </div>
</template>

<script>
import { ElNotification } from "element-plus";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
export default {
  data() {
    return {};
  },

  setup() {
    const $router = useRouter();
    let name = ref("admin");
    let password = ref("root");
    let msg = ref("登录页");
    const date = ref(new Date().toLocaleDateString());

    const ruleForm = reactive({
      pass: "",
      user: "",
    });

    const postLogin = () => {
      console.log(ruleForm);
      console.log(name, password);
      if (name._rawValue == ruleForm.user && password._value == ruleForm.pass) {
        ElNotification({
          title: "登录",
          message: "登录成功",
          type: "success",
        });
        $router.push("/home");
      } else {
        ElNotification({
          title: "登录",
          message: "请输入账号或密码不正确！",
          type: "error",
        });
      }
    };

    return {
      msg,
      date,
      ruleForm,
      postLogin,
    };
  },

  methods: {},
};
</script>

<style scoped>
.container {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  background: #f2f2f2;
  text-align: center;
  box-shadow: 0px 0px 2px 2px skyblue;
}
h1 {
  text-shadow: 2px 2px 2px red;
}
span {
  font-size: 16.5px;
  font-weight: bold;
}
input {
  width: 270px;
  height: 30px;
  margin-bottom: 10px;
}
button {
  font-size: 18px;
  width: 200px;
  height: 50px;
  background: skyblue;
}
p {
  font-size: 20px;
  font-weight: bold;
}
</style>
